import React , {useEffect,useRef}from "react";
import * as echarts from 'echarts'
import { px } from "../shared/px";
import { baseChartOption } from "../shared/base-chart-option";
import { createChartOption } from "../shared/create-chart-option";
import { number } from "echarts";

export const Chart1 = () => {
    const divRef = useRef(null);
    const myChart = useRef(null);
    const data = [
      {name: '城关区', number: 5},
      {name: '七里河区', number: 20},
      {name: '西固区', number: 36},
      {name: '安宁区', number: 41},
      {name: '红古区', number: 23},
      {name: '永登县', number: 15},
      {name: '皋兰县', number: 16 },
      {name: '榆中县', number: 18},
      {name: '新区', number: 35},
    ]
    useEffect(() => {
      setInterval(() => {
        const newData = [
          {name: '城关区', number: 5},
          {name: '七里河区', number: 20},
          {name: '西固区', number: 36},
          {name: '安宁区', number: 41},
          {name: '红古区', number: 23},
          {name: '永登县', number: 15},
          {name: '皋兰县', number: 16 },
          {name: '榆中县', number: 18},
          {name: '新区', number: Math.random() * 100},
        ]
        x(newData)
      }, 1000)
    })
    const x = (data) => {
      myChart.current.setOption(createChartOption({
        ... baseChartOption,
  xAxis: {
    data: data.map(i => i.name),
    axisTick: {show: false},
    axisLine: {
      show: true,
      lineStyle: {
        color: '#073e75'
      }
    },
    axisLabel: {
      fontSize: px(12),
      formatter(val) {
        if (val.length > 2) {
          const array = val.split('');
          array.splice(2,0,'\n')
          return array.join('')
        } else {
          return val
        }
      }
    }
  },
  yAxis: {
    splitLine: {show: false},
    axisLine: {
      show: true,
      lineStyle: {
        color: '#073e75'
      }
    },
    axisLabel: {
      fontSize: px(12)
    }
  },
  series: [
    {
      name: '销量',
      type: 'bar',
      data: data.map(i => i.number)
    }
  ]
      }))
    }
  useEffect(() => {
    myChart.current = echarts.init(divRef.current);
    x(data)
  })
    return (
        <div className='bordered 管辖统计'>
            <h2>案发派出所管辖统计</h2>
            <div ref={divRef} className='charts'></div>
          </div>
    )
}